<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>HTML-DOCX test</title>
	<!-- <script src="./vendor/es5-shim.min.js"></script> -->
	<script src="./jquery.js"></script>
	<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts.min.js"></script>
	<!-- <script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script> -->
	<!-- <script src="vendor/FileSaver.js"></script> -->
	<script src="./html-docx.min.js"></script>
	<script src="./generate.js"></script>
</head>
<style>
	#main,
	#main1 {
		height: 400px;
		width: 630px
	}

	.list {
		background: blue;
		padding: 10px
	}

	.list .page {
		background: yellow;
		padding: 5px;
		height: 20px;
	}

	.img {
		padding: 50px;
	}

	table {
		align-text: center;
		width: 100%;
		vertical-align: middle;
		border-top: 1px solid #ddd;
		border-left: 1px solid #ddd;
	}

	table td,
	table th {
		width: 20%;
		height: 40px;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	table p {
		text-indent: 0 !important;
		text-align: center;
	}

	/*
@paramas
	exportElement
*/
</style>
<body>
	<div id="html-docx">

		<h1>第一层</h1>
		<p>111111111We all live in a yellow submarine, yellow submarine, yellow submarine, yellow submarine</p>
		<h2>第二层</h2>
		<p style="font-size: 30px">Images can also be exported if you source them as base64 DATA URI.</p>
		<h3>第三层</h3>
		<h3>第三层</h3>
		<div id="main"></div>
		<div id="main1"></div>
		<div class="change-line"></div>
		<div class="list">
			<div class="page">1</div>
			<div class="page">2</div>
			<div class="page">3</div>
		</div>
		<div class="img" style="text-align: center">
			<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
				style="padding-left:50px" />
			<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
				style="padding-left:50px" />
			<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3357786243,3135716437&fm=26&gp=0.jpg"
				style="padding-left:50px" />
		</div>
		<h1>第一层</h1>
		<p>sdfsdfsdfsdfsd</p>
		<table>
			<tr>
				<th>序号</th>
				<th>序号</th>
				<th>序号</th>
				<th>序号</th>
				<th>序号</th>
				<th>序号</th>
			</tr>
			<tr>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
				<td>
					<p style="text-align: center;text-indent: 0;">name2222222222222222222222</p>
				</td>
			</tr>

		</table>
	</div>
	<button id="convert">Convert</button>

	<script>
		var chart = echarts.init(document.getElementById("main"));
		var chart1 = echarts.init(document.getElementById("main1"));
		var option = {
			legend: {
				top: 'bottom',
				data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
			color: ['#29F34F', '#FFFF00', '#FFC000', '#FF0000'],
			series: [
				{
					name: '访问来源',
					type: 'pie',
					// startAngle:90,
					radius: '55%',
					center: ['50%', '50%'],
					label: {
						position: 'inside',
						formatter: ' {d}'
					},
					data: [
						{ value: 335, name: '直接访问' },
						{ value: 310, name: '邮件营销' },
						{ value: 234, name: '联盟广告' },
						{ value: 135, name: '视频广告' },

					],
				}
			]
		};
		chart.setOption(option);
		chart1.setOption(option);

	</script>
	<script>
		// 这段代码用来处理style标签的样式
		let arr = []
		let element = document.getElementsByClassName('style')
		if (element.length) {
			for (var i = 0; i < element.length; i++) {
				arr.push(element[i].innerText.replace(/\s{2,}/g,''))
			}
		}
		// 转换事件
		$('#convert').click(function () {
			HtmlToDocx({
				exportElement: '#html-docx', // 需要转换为word的html标签
				exportFileName: 'list.docx', // 转换之后word文档的文件名称
				StringStyle: arr.join(''), // css样式以字符窜的形式插入进去
				margins:{top: 1440,right: 1440,bottom: 1440,left: 1440,header: 720,footer: 720,gutter: 0} // word的边距配置
			})
		})
	</script>
</body>

</html>
